//面板伸缩，false为展开，true为收缩
var controllerMode = false;
var preMode = false;
//参数改变后改变style
function changeStyle() {
    //control样式
    if (controllerMode){
        controlCloseBtn.style.display = 'none'
        controlOpenBtn.style.display = 'block'
        controlBlock.style.transform = 'translateX(160px)'
    }else {
        controlCloseBtn.style.display = 'block'
        controlOpenBtn.style.display = 'none'
        controlBlock.style.transform = 'translateX(0)'
    }
    //pre按钮样式
    if (preMode){
        preCloseBtn.style.display = 'none'
        preOpenBtn.style.display = 'block'
        preBlock.style.transform = 'translateY(180px)'
    }else {
        preCloseBtn.style.display = 'block'
        preOpenBtn.style.display = 'none'
        preBlock.style.transform = 'translateY(0)'
    }
}
//改变面板展开/隐藏
function changeControllerMode() {
    controllerMode = !controllerMode
    changeStyle()
}
function changePreMode() {
    preMode = !preMode
    changeStyle()
}
//获取两个面板
var controlBlock = document.getElementById('control-block')
var preBlock = document.getElementById('pre-block')
//获取4种按钮
var controlCloseBtn = document.getElementById('control-close-btn');
var controlOpenBtn = document.getElementById('control-open-btn')
var preCloseBtn = document.getElementById('pre-close-btn')
var preOpenBtn = document.getElementById('pre-open-btn')
//点击按钮后改变面板状态
controlCloseBtn.addEventListener('click', changeControllerMode)
controlOpenBtn.addEventListener('click', changeControllerMode)
preCloseBtn.addEventListener('click', changePreMode)
preOpenBtn.addEventListener('click', changePreMode)
changeStyle()